import { memo } from 'react';
import { User } from '../../services/jsonPlaceholder';
import styles from './styles.module.scss';

interface Props {
  item: User;
}

const Info = ({ item }: Props) => (
  <div className={styles.Info}>
    <h4>User Info</h4>
    <ul>
      <li>id: {item.id}</li>
      <li>name: {item.name}</li>
      <li>phone: {item.phone}</li>
      <li>email: {item.email}</li>
      <li>website: {item.website}</li>
    </ul>
  </div>
);

export default memo(Info);
